<template>
  <div class="dash-board dash-board-main">
    <Row type="flex">
      <Col :span="24" class="main-panel">
      <Panel @chartClick="mainChartClick" :chartHeight="chartHeight" @updateData="updateTotalCount" ref="main" :model="model.date" :extParam="extParam" :chartShow="!mainDrill" main="true" @modeChange="modeChange" :selectable="true"
        @paramChange="paramChange" class="chart-main" :param="mainParam">
        <template slot-scope="tool" slot="tool">
          <span class="total-box">回款总金额<span class="total-value">{{totalMoney}}</span></span>
          <span class="total-box">回款笔数总计<span class="total-value">{{totalCount}}</span></span>
        </template>
         <template slot-scope="tool" slot="tool-right">
          <span class="filter-box"><Icon type="funnel"></Icon><span class="filter-box-title">过滤条件</span> 
          <span v-if="!assetMode">
            委托方
            <Selector class="selector-asset" @selectChange="filterChange" v-model="filter.asset_tenantry_id" size="small" :path="pathAsset"></Selector> 
          </span>
          <span class="filter-label">账龄</span><Selector class="selector-period" :filterable="false" @selectChange="filterChange" v-model="filter.overdue_period" :data="mData" size="small"></Selector></span>
        </template>   
      </Panel>
      </Col>
      <div class="main-drill-box">
        <div class="main-drill-info" v-show="mainDrill">
          <div>
            <div class="main-drill-title">明细数据</div>
            <Button @click="mainBack" class="btn-main-back" v-show="mainDrill" type="success" icon="arrow-return-left" size="small">返回</Button>
          </div>
          <table v-if="mainData">
            <tr>
              <th>日期</th>
              <td>{{mainData.received_date}}</td>
            </tr>
            <tr>
              <th>回款金额</th>
              <td>{{mainData.received_money}}</td>
            </tr>
            <tr>
              <th>数量</th>
              <td>{{mainData.received_count}}</td>
            </tr>
          </table>
        </div>
        <div class="main-drill-item" v-show="mainDrill">
          <Panel ref="main_drill_count" :model="model.product" :mode="monthly" :param="drillparamData" class="chart-main-drill"></Panel>
        </div>
        <div class="main-drill-item"  v-show="mainDrill">
          <Panel ref="main_drill_call" :model="model.area" :mode="monthly" :param="drillparamData" class="chart-main-drill"></Panel>
        </div>
      </div>
      <Col :span="12" v-if="!assetMode">
      <Panel v-if="!showSingle " :model="model.product" :mode="monthly" :param="paramData"></Panel>
      </Col>
      <Col :span="12" v-if="!assetMode">
      <Panel v-if="!showSingle" :model="model.area" :mode="monthly" :param="paramData"></Panel>
      </Col>
    </Row>
  </div>
</template>

<script>
import Panel from "../panelTabChart";
import model from "./mainModel";
import Time from "@/common/time";
import $ from "@/common";
import Selector from "@/components/selector";
export default {
  data() {
    return {
      path: {
        asset: "/service/{app}/dataset/data/db_cs_asset_tenantry"
      },
      model,
      extParam: {},
      //只显示主表
      showSingle: false,
      monthly: false,
      mainDrill: false,
      mainIndex: null,
      noMainDrill: true,
      filter: {
        asset_tenantry_id: null,
        overdue_period: null
      },
      assetMode: false,
      mainParam: {},
      mData: [
        {
          name: "M0",
          id: 0
        },
        {
          name: "M1",
          id: 1
        },
        {
          name: "M2",
          id: 2
        },
        {
          name: "M3",
          id: 3
        },
        {
          name: "M4",
          id: 4
        },
        {
          name: "M5",
          id: 5
        },
        {
          name: "M6",
          id: 6
        }
      ],
      totalCount: 0,
      totalMoney: 0,
      paramData: {},
      drillparamData: {}
    };
  },
  computed: {
    mainData() {
      if (this.mainIndex !== null) {
        return this.$refs.main.data[this.mainIndex];
      } else {
        return null;
      }
    },
    chartHeight() {
      return window.innerHeight - 170;
    },
    pathAsset() {
      if (window.App === "cs") {
        return "/service/{app}/dataset/data/ds_asset_tenantry";
      } else {
        return "/service/{app}/dataset/data/db_cs_asset_tenantry";
      }
    }
  },
  methods: {
    filterChange() {
      var data = {};
      for (let i in this.filter) {
        if (
          this.filter[i] !== null &&
          this.filter[i] !== undefined &&
          this.filter[i] !== ""
        ) {
          data[i] = this.filter[i];
        }
      }
      this.$set(this, "mainParam", data);
    },
    updateTotalCount(data) {
      var money = 0;
      var count = 0;
      for (let i in data) {
        money += data[i].received_money || 0;
        count += data[i].received_count || 0;
      }
      this.totalMoney = $.toMoney(money.toFixed(2));
      this.totalCount = count;
    },
    mainChartClick(p) {
      if (this.noMainDrill) return;
      this.mainDrill = true;
      this.mainIndex = p.dataIndex;
      var date = this.mainData.received_date;
      this.drillparamData = {
        ...this.mainData,
        start_time: date,
        end_time: Time.toDate(Time.toTs(date) + 1000 * 60 * 60 * 24)
      };
      this.$nextTick(() => {
        this.$refs.main_drill_count.resize();
        this.$refs.main_drill_count.getData();
        this.$refs.main_drill_call.resize();
        this.$refs.main_drill_call.getData();
      });
    },
    mainBack() {
      this.mainDrill = false;
    },
    paramChange(v) {
      this.$set(this, "paramData", {
        ...this.paramData,
        ...v
      });
    },
    modeChange(v) {
      this.monthly = v;
    }
  },
  created() {
    this.model.date.grid = {
      containLabel: false,
      top: 30,
      left: 60,
      right: 20,
      height: "32%",
      bottom: "auto"
    };
    this.model.date.grids[0].grid = {
      containLabel: false,
      top: this.chartHeight * 0.32 + 90,
      left: 60,
      right: 20,
      height: "20%",
      bottom: 0
    };
    this.model.date.grids[1].grid = {
      containLabel: false,
      top: this.chartHeight * 0.52 + 135,
      left: 60,
      right: 20,
      height: this.chartHeight - (this.chartHeight * 0.52 + 145),
      bottom: "auto"
    };
  },
  components: {
    Panel,
    Selector
  }
};
</script>

<style lang="less">
.dash-board-main {
  .chart-control {
    height: 240px;
  }
  .badge-text.badge-empty {
    display: none;
  }
  .selector-asset {
    .ivu-select {
      width: 140px;
    }
  }
  .selector-period {
    .ivu-select {
      width: 80px;
    }
  }
  .main-panel {
    margin-bottom: 24px;
  }
  .selector {
    display: inline-block;
  }
  .ivu-select {
    width: 100px;
    margin-top: 0;
    margin-left: 4px;
    margin-right: 4px;
  }
}

.main-drill-box {
  display: flex;
  width: 100%;
  .main-drill-item {
    flex: 1;
  }
  .main-drill-title {
    padding: 4px 0;
    display: inline-block;
  }
  .main-drill-info {
    padding: 8px;
    table {
      th,
      td {
        text-align: left;
        padding: 2px 0;
      }
      th {
        padding-right: 8px;
      }
    }
  }
  .btn-main-back {
    margin-left: 16px;
    float: right;
  }
}
.chart-main {
  .hide-text {
    display: none;
  }
}

.chart-main-drill {
  .dash-header {
    display: none;
  }
}
</style>
